﻿using System;
using System.Collections.Generic;

namespace WUDI.ECharts.Grid.Tooltip
{
	/// <summary>
	/// *
	/// 本坐标系特定的 tooltip 设定。
	/// 提示框组件的通用介绍：
	/// 提示框组件可以设置在多种地方：
	/// 可以设置在全局，即 tooltip
	/// 可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
	/// 可以设置在系列中，即 series.tooltip
	/// 可以设置在系列的每个数据项中，即 series.data.tooltip
	/// </summary>
	public class Tooltip
	{

		/// <summary>
		/// boolean
		/// 是否显示提示框组件，包括提示框浮层和 axisPointer。
		/// </summary>
		public Boolean show { get; set; } = true;

		/// <summary>
		/// string
		/// 触发类型。
		/// 可选：
		/// 'item'
		///   数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
		/// 'axis'
		///   坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
		///   在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
		/// 'none'
		///   什么都不触发。
		/// </summary>
		public Trigger trigger { get; set; } = Trigger.item;

		/// <summary>
		/// Object
		/// </summary>
		public WUDI.ECharts.Grid.Tooltip.AxisPointer.AxisPointer axisPointer { get; set; }

		/// <summary>
		/// string,Array,Function
		/// </summary>
		public dynamic position { get; set; }

		/// <summary>
		/// string,Function
		/// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
		/// 1, 字符串模板
		/// 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
		/// 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。
		/// 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。
		/// 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
		/// 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
		/// 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
		/// 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
		/// 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
		/// 更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。
		/// 示例：
		/// formatter: '{b0}: {c0}<br />{b1}: {c1}'
		/// 2, 回调函数
		/// 回调函数格式：
		/// (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
		/// 第一个参数 params 是 formatter 需要的数据集。格式如下：
		/// {
		///     componentType: 'series',
		///     // 系列类型
		///     seriesType: string,
		///     // 系列在传入的 option.series 中的 index
		///     seriesIndex: number,
		///     // 系列名称
		///     seriesName: string,
		///     // 数据名，类目名
		///     name: string,
		///     // 数据在传入的 data 数组中的 index
		///     dataIndex: number,
		///     // 传入的原始数据项
		///     data: Object,
		///     // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
		///     value: number|Array|Object,
		///     // 坐标轴 encode 映射信息，
		///     // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
		///     // value 必然为数组，不会为 null/undefied，表示 dimension index 。
		///     // 其内容如：
		///     // {
		///     //     x: [2] // dimension index 为 2 的数据映射到 x 轴
		///     //     y: [0] // dimension index 为 0 的数据映射到 y 轴
		///     // }
		///     encode: Object,
		///     // 维度名列表
		///     dimensionNames: Array<String>,
		///     // 数据的维度 index，如 0 或 1 或 2 ...
		///     // 仅在雷达图中使用。
		///     dimensionIndex: number,
		///     // 数据图形的颜色
		///     color: string,
		///     // 饼图的百分比
		///     percent: number,
		/// }
		/// 注：encode 和 dimensionNames 的使用方式，例如：
		/// 如果数据为：
		/// dataset: {
		///     source: [
		///         ['Matcha Latte', 43.3, 85.8, 93.7],
		///         ['Milk Tea', 83.1, 73.4, 55.1],
		///         ['Cheese Cocoa', 86.4, 65.2, 82.5],
		///         ['Walnut Brownie', 72.4, 53.9, 39.1]
		///     ]
		/// }
		/// 则可这样得到 y 轴对应的 value：
		/// params.value[params.encode.y[0]]
		/// 如果数据为：
		/// dataset: {
		///     dimensions: ['product', '2015', '2016', '2017'],
		///     source: [
		///         {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
		///         {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
		///         {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
		///         {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
		///     ]
		/// }
		/// 则可这样得到 y 轴对应的 value：
		/// params.value[params.dimensionNames[params.encode.y[0]]]
		/// 在 trigger 为 'axis' 的时候，或者 tooltip 被 axisPointer 触发的时候，params 是多个系列的数据数组。其中每项内容格式同上，并且，
		/// {
		///     componentType: 'series',
		///     // 系列类型
		///     seriesType: string,
		///     // 系列在传入的 option.series 中的 index
		///     seriesIndex: number,
		///     // 系列名称
		///     seriesName: string,
		///     // 数据名，类目名
		///     name: string,
		///     // 数据在传入的 data 数组中的 index
		///     dataIndex: number,
		///     // 传入的原始数据项
		///     data: Object,
		///     // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
		///     value: number|Array|Object,
		///     // 坐标轴 encode 映射信息，
		///     // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
		///     // value 必然为数组，不会为 null/undefied，表示 dimension index 。
		///     // 其内容如：
		///     // {
		///     //     x: [2] // dimension index 为 2 的数据映射到 x 轴
		///     //     y: [0] // dimension index 为 0 的数据映射到 y 轴
		///     // }
		///     encode: Object,
		///     // 维度名列表
		///     dimensionNames: Array<String>,
		///     // 数据的维度 index，如 0 或 1 或 2 ...
		///     // 仅在雷达图中使用。
		///     dimensionIndex: number,
		///     // 数据图形的颜色
		///     color: string,
		/// }
		/// 注：encode 和 dimensionNames 的使用方式，例如：
		/// 如果数据为：
		/// dataset: {
		///     source: [
		///         ['Matcha Latte', 43.3, 85.8, 93.7],
		///         ['Milk Tea', 83.1, 73.4, 55.1],
		///         ['Cheese Cocoa', 86.4, 65.2, 82.5],
		///         ['Walnut Brownie', 72.4, 53.9, 39.1]
		///     ]
		/// }
		/// 则可这样得到 y 轴对应的 value：
		/// params.value[params.encode.y[0]]
		/// 如果数据为：
		/// dataset: {
		///     dimensions: ['product', '2015', '2016', '2017'],
		///     source: [
		///         {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
		///         {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
		///         {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
		///         {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
		///     ]
		/// }
		/// 则可这样得到 y 轴对应的 value：
		/// params.value[params.dimensionNames[params.encode.y[0]]]
		/// 注： ECharts 2.x 使用数组表示各参数的方式不再支持。
		/// 第二个参数 ticket 是异步回调标识，配合第三个参数 callback 使用。
		/// 第三个参数 callback 是异步回调，在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 ticket 和 html 更新提示框浮层内容。
		/// 示例：
		/// formatter: function (params, ticket, callback) {
		///     $.get('detail?name=' + params.name, function (content) {
		///         callback(ticket, toHTML(content));
		///     });
		///     return 'Loading';
		/// }
		/// </summary>
		public dynamic formatter { get; set; }

		/// <summary>
		/// Color
		/// 提示框浮层的背景颜色。
		/// </summary>
		public String backgroundColor { get; set; } = "rgba(50,50,50,0.7)";

		/// <summary>
		/// Color
		/// 提示框浮层的边框颜色。
		/// </summary>
		public String borderColor { get; set; } = "#333";

		/// <summary>
		/// number
		/// 提示框浮层的边框宽。
		/// </summary>
		public int borderWidth { get; set; } = 0;

		/// <summary>
		/// number
		/// 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
		/// 使用示例：
		/// // 设置内边距为 5
		/// padding: 5
		/// // 设置上下的内边距为 5，左右的内边距为 10
		/// padding: [5, 10]
		/// // 分别设置四个方向的内边距
		/// padding: [
		///     5,  // 上
		///     10, // 右
		///     5,  // 下
		///     10, // 左
		/// ]
		/// </summary>
		public int padding { get; set; } = 5;

		/// <summary>
		/// Object
		/// 提示框浮层的文本样式。
		/// </summary>
		public WUDI.ECharts.Grid.Tooltip.TextStyle textStyle { get; set; }

		/// <summary>
		/// string
		/// 额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：
		/// extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
		/// </summary>
		public String extraCssText { get; set; }

	}
}
